<template>
	<div class="header">
		<div class="slogan">
			<p class="p1">小智食谱</p>
			<p class="p2">你想吃的都在这里</p>
		</div>
		<div class="logo">
			<a href="#/test"><img src="../assets/caipu/logo.png"></a>
		</div>
		<div class="search">
			<span class="iconfont icon-sousuo"></span>
			<input type="search" placeholder="搜索菜谱、食材" v-model="searchData" />
		</div>
		<div :class="a1" @mousedown="handleDown" ref="xiaozhi" @mouseup="handleUp">
			<!-- <img src="../assets/images/xiaozhi.png" @mousedown="handleDown(),translationStart()" ref="xiaozhi" @mouseup="handleUp(),translationEnd()" > -->
		</div>
		<div class="menu">
			<a href="#/test2"><img src="../assets/caipu/menu.png"></a>
		</div>
	</div>
</template>

<script>
	// 导入请求数据的 baseurl
	// import baseUrl from '@/utils/urlconfig'
	// 导入语音识别，语音合成api
	import Voice from '@/assets/js/voice'
	// import TtsRecorder from '@/assets/js/audio'
	// import IatRecorder from '@/assets/js/IatRecorder'
	// const iatRecorder = new IatRecorder()// 小语种-中文方言-appId
	// const ttsRecorder = new TtsRecorder()
	let times = null;
	let content = null;
	// 实例化迅飞语音听写（流式版）WebAPI
	const voice = new Voice({

		// 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
		appId: '20c1b878',
		apiSecret: 'NWYzYmRlOTA4YzlmYTMxYjljYzA5NDNj',
		apiKey: 'f8551ac793989f9934363cb96f57daf7',
		// 注：要获取以上3个参数，请到迅飞开放平台：https://www.xfyun.cn/services/voicedictation 【注：这是我的迅飞语音听写（流式版）每天服务量500（也就是调500次），如果你需求里大请购买服务量：https://www.xfyun.cn/services/voicedictation?target=price】

		onWillStatusChange: function(oldStatus, newStatus) {
			//可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
			// fixedBox.style.display = 'block';
		},
		onTextChange: function(text) {
			//监听识别结果的变化
			content = text
			console.log(text)
			console.log(this)
			// 3秒钟内没有说话，就自动关闭
			if (text) {
				clearTimeout(times);
				times = setTimeout(() => {
					this.stop(); // voice.stop();
				}, 3000);
			};
		}
	});
	export default {
		data() {
			return {
				searchData: '',
				a1: "ai1",
			}
		},
		methods: {
			handleDown() {
				this.a1 = "ai2"
				// this.translationStart()
				console.log(123123)
				voice.start()
				this.searchData = "haha"
			},
			handleUp() {
				// console.log(this.$refs.xiaozhi.src)
				this.a1 = "ai1"
				 voice.stop();
				// this.$refs.xiaozhi.src = 'https://localhost:444/xiaozhi.png'
				// this.translationEnd()
			},
			// translationStart () {
			//   iatRecorder.start()
			// },
			// translationEnd () {
			//   iatRecorder.onTextChange = (text) => {
			//     var inputText = text
			//     this.searchData = inputText // .substring(0, inputText.length - 1); 文字处理，因为不知道为什么识别输出的后面都带‘。’，这个方法是去除字符串最后一位
			//     console.log(this.searchData)
			//     // var lishi = RegExp(/今天的天气/)
			//   }
			//   iatRecorder.stop()
			// }
		},
	}
</script>

<style scoped>
	p,
	ul,
	li {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	/* header 头部制作------------start------------ */
	.header {
		width: 100%;
		height: 0.75rem;
		padding-top: 0.125rem;
		color: #FAFAFA;
		position: sticky;
		top: 0px;
		z-index: 20;
		background-color: #F0F0F0
	}

	.header div {
		float: left;
	}

	.header div img {
		height: 0.5625rem;
		width: 0.5625rem;
	}

	.header .slogan {
		width: 1.125rem;
		height: 100%;
		font-family: "楷体";
		text-align: center;
		margin-left: 0.3125rem;
		color: #949292;
	}

	.header .slogan .p1 {
		font-size: 0.275rem;
		font-weight: bold;
	}

	.header .slogan .p2 {
		font-size: 0.1375rem;
	}

	.header .logo {
		margin-left: 0.15625rem;
	}

	.header .search {
		position: relative;
		width: 3.9375rem;
		height: 0.5625rem;
		margin-left: 0.925rem;
	}

	.header .search .iconfont {
		position: absolute;
		font-size: 0.2625rem;
		top: 0.125rem;
		left: 0.1875rem;
		font-weight: bold;
		color: rgb(119, 119, 119);
	}

	.header .search input {
		font-family: 'iconfont';
		width: 100%;
		height: 0.5625rem;
		background: #E6e6e6;
		outline: none;
		border-radius: 0.0625rem;
		border: none;
		padding-left: 0.55rem;
		font-size: 0.20625rem;
	}

	/* 	.header .search input:before{
			content: "\e778";
		} */
	.header .ai1 {
		background: url("/xiaozhi.png");
		margin-left: 0.175rem;
		height: 0.5625rem;
		width: 0.5625rem;
		background-size: 0.5625rem, 0.5625rem;
	}

	.header .ai2 {
		background: url("/xiaozhi2.png");
		margin-left: 0.175rem;
		height: 0.5625rem;
		width: 0.5625rem;
		background-size: 0.5625rem, 0.5625rem;
	}

	.header .menu {
		margin-left: 1.625rem;
	}

	/* header 头部制作------------end------------ */
</style>
